<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--使用CDN方式引入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.4/vue.min.js"></script>
</head>
<body>
<h1>数据的单向绑定与双向绑定</h1>
<hr>

<!-- id标识vue作用的范围 -->
<!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令
 此时title中显示的是模型数据
-->
<div id="app">
    <!-- v-bind:value只能进行单向的数据渲染 -->
    单向：<input type="text" v-bind:value="searchMap.keyWord">
    <!-- v-model 可以进行双向的数据绑定  -->
    双向：<input type="text" v-model="searchMap.keyWord">

    <p>您要查询的是：{{searchMap.keyWord}}</p>
</div>

<script>
    // 创建一个vue对象
    let vm = new Vue({
        el: '#app',//绑定vue作用的范围,el是element的简写。
        data: {//定义页面中显示的模型数据或者说为属性
            searchMap:{
                keyWord:'牛牛编程'
            }
        }
    })
</script>
</body>
</html>
